<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div id="parent" class="parent">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
    </div>

    <script>
        const parentEle = document.querySelector('#parent')
        parentEle.onclick = function (e) {
            // if的作用：将事件真正要执行的代码，限制在子标签身上
            if (e.target.nodeName == 'BUTTON') {
                console.log("子标签要做的事情1");
            }

            if (e.target.className == 'btn') {
                console.log("子标签要做的事情2");
            }
        }
    </script>
</body>

</html>